<!-- -->
<template>
  <div class='home'>
    <Carousel />
    <Search v-if='hasHospitalArr.length === 0'></Search>
    <Search v-else :hasHospitalArr='hasHospitalArr' @update:searchHospital='searchHospital'></Search>
    <el-row :gutter='100'>
      <el-col :span='18'>
        <Level @update:changeLevel='changeLevel'></Level>
        <Region @update:changeRegion='changeRegion'></Region>
        <div v-loading='isLoading' class='cardBox' v-if="hasHospitalArr.length > 0">
          <Card
            class='card-item'
            v-for='(item, index) in hasHospitalArr'
            :key='index'
            :hospitalInfo='item'
            @click='goToDetail(item)'>
          </Card>
        </div>
        <div v-loading='isLoading' v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
        <Pagination
          @update:pageInfo='handleSizeChange'
          @update:currentPage='handleCurrentChange'
          :pageInfo='pageInfo'></Pagination>
          <!-- <el-pagination
            :current-page="pageInfo.currentPage"
            :page-size="pageInfo.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
      </el-col>
      <el-col :span='6'>
        <Tip></Tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import Carousel from './components/Carousel.vue'
import Search from './components/Search.vue';

import Level from './components/Level.vue';
import Region from './components/Region.vue';
import Card from '@/components/card/index.vue';
import Tip from './components/Tip.vue';
import Pagination from '@/components/pagination/index.vue';

import { reqHospital } from '@/api/path';

import router from '@/router'

let pageInfo = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

let hostype = ref('')
let districtCode = ref('')
let hosname = ref('')
let isLoading = ref(false)
let hasHospitalArr = ref([])

const getHospitalList = async () => {
  isLoading.value = true
  const res: any = await reqHospital(pageInfo.value.currentPage, pageInfo.value.pageSize, hostype.value, districtCode.value, hosname.value);
  if (res.code === 200) {
    hasHospitalArr.value = res.data.content
    pageInfo.value.total = res.data.totalElements
    isLoading.value = false
  }
}

const handleSizeChange = (val: number) => {
  console.log(val);
  pageInfo.value.currentPage = 1
  pageInfo.value.pageSize = val
  getHospitalList()
}

const handleCurrentChange = (val: number) => {
  pageInfo.value.currentPage = val
  getHospitalList()
}

const changeLevel = (val: string) => {
  hostype.value = val
  getHospitalList()
}

const changeRegion = (val: string) => {
  districtCode.value = val
  getHospitalList()
}

const searchHospital = (val: string) => {
  hosname.value = val
  getHospitalList()
}

const goToDetail = (val: any) => {
  router.push({
    path: '/hospitalDetail/register',
    query: {
      hoscode: val.hoscode
    }
  })
}

onMounted(() => {
  getHospitalList()
})

</script>

<style lang='scss' scoped>
.home {
  width: 1200px;
  .cardBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card-item {
      width: 48%;
      margin: 15px 0;
    }
  }
}
</style>
